<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import LjLayout from "@/pages_nbst/components/lj-layout.vue"
	import {
		getStudentReq
	} from "/pages_nbst/api/my.js"

	onLoad(() => {
		getUser()
	})

	const searchString = ref('')

	const dropDownData = reactive({
		label: '姓名',
		value: 'username',
		activeIndex: 0,
		color: '#333',
		activeColor: '#2878ff',
		child: [{
			label: '姓名',
			value: 'username'
		}, {
			label: '学号',
			value: 'studentNum'
		}]
	})
	const onClickDropDownItem = e => {
		dropDownData.label = e.label
		dropDownData.value = e.value
		searchString.value = ''
	}
	const onClickSearch = () => {
		page.value = 1
		getUser()
	}

	// page
	const pageSize = ref(10)
	const page = ref(1)
	const total = ref(0)
	const loadMoreStatus = ref('loadmore')
	const userList = ref([])
	const getUser = () => {
		let searchForm = {}
		if (searchString.value.length > 0) {
			searchForm[dropDownData.value] = searchString.value
		}
		getStudentReq(Object.assign({
			pageSize: pageSize.value,
			page: page.value++
		}, searchForm)).then(res => {
			userList.value = res.list
			total.value = res.total
			loadMoreStatus.value = userList.value.length >= res.total ? 'nomore' : 'loadmore'
		})
	}
	
	const conClickGoUserDetail = (item) => {
		uni.navigateTo({
			url:'/pages_nbst/views/my/userdetail?id=' + item.id
		})
	}
</script>

<template>
	<LjLayout>
		<view style="margin: 20rpx; display: flex;flex-direction: column;gap: 10rpx;position: relative;">
			<view style="position: sticky;top: 20rpx;">
				<uv-search placeholder="请输入搜索内容" v-model="searchString" bgColor="white" :showAction="false"
					shape="square">
					<template v-slot:prefix>
						<uv-drop-down ref="dropDown" sign="dropDown_1" :defaultValue="['username']">
							<uv-drop-down-item name="search" type="2" :label="dropDownData.label"
								:value="dropDownData.value" />
						</uv-drop-down>
						<uv-drop-down-popup sign="dropDown_1" :current-drop-item="dropDownData"
							@clickItem="onClickDropDownItem" />
					</template>
					<template #suffix>
						<view style="margin-right: 20rpx;color: #6f95c2;" @click="onClickSearch">
							搜索
						</view>
					</template>
				</uv-search>
				<view class="box" style="margin-top: 20rpx;">
					<view class="box-item item1">姓名</view>
					<view class="box-item item1">学号</view>
					<view class="box-item item1">学段</view>
					<view class="box-item item1">专业</view>
					<view class="box-item item1">分数</view>
				</view>
			</view>
			<view class="box box1" v-for="item in userList" :key="item.id" @click="conClickGoUserDetail(item)">
				<view class="box-item">{{item.username}}</view>
				<view class="box-item">{{item.student_num}}</view>
				<view class="box-item">{{item.subject.split(' ')[0]}}</view>
				<view class="box-item">{{item.subject.split(' ')[1]}}</view>
				<view class="box-item">{{item.score}}</view>
			</view>
			<uv-load-more :status="loadMoreStatus" loadmore-text="点击加载更多" dashed line @loadmore="getUser()" />
		</view>
		<view style="height: 70rpx;"></view>
	</LjLayout>
</template>

<style scoped lang="scss">
	.box {
		display: flex;
		gap: 10rpx;
	}

	.box-item {
		flex: 1 1 0;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		word-wrap: break-word;
		word-break: break-all;
	}

	.item1 {
		border: 1rpx white solid;
		background-color: #6f95c2;
		border-radius: 10rpx;
		color: white;
		padding: 14rpx 0;
	}

	.box1 {
		padding: 10rpx 0;
		background-color: white;
		border-radius: 10rpx;
	}
</style>

<style>
</style>